<template>
    <div class="app-container">
      <div class="container_box">
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="12">
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
              <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="映射類型" prop="mapType">
                    <el-select
                    @input="$forceUpdate()"
                      style="width: 100%"
                      v-model="form.mapType"
                      disabled
                    >
                      <el-option
                        v-for="dict in dict.type.subject_map_type"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
  
              <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="业务科目类型" prop="busSubjectType">
                    <el-select
                      style="width: 100%"
                      @input="$forceUpdate()"
                      v-model="form.busSubjectType"
                      disabled
                    >
                      <el-option
                        v-for="dict in dict.type.bus_subject_type"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="业务科目" prop="busSubject">
                    <el-select
                      style="width: 100%"
                      @input="$forceUpdate()"
                      v-model="form.busSubject"
                      disabled
                    >
                      <el-option
                        v-for="dict in dict.type.cost_scope"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="科目分類(借)" prop="JaccountSubject">
                    <el-cascader
                      style="width: 100%"
                      @input="$forceUpdate()"
                      disabled
                      v-model="accountSubjectArrJ"
                      :options="accountSubjectArr"
                      filterable
                      :props="{
                        expandTrigger: 'hover',
                        value: 'dictValue',
                        label: 'name',
                        children: 'children',
                      }"
                      @change="queryASHandleChangeJ"
                      clearable
                    ></el-cascader>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="科目分類(貸)" prop="DaccountSubject">
                    <el-cascader
                      style="width: 100%"
                      disabled
                      @input="$forceUpdate()"
                      v-model="accountSubjectArrD"
                      :options="accountSubjectArr"
                      filterable
                      :props="{
                        expandTrigger: 'hover',
                        value: 'dictValue',
                        label: 'name',
                        children: 'children',
                      }"
                      @change="queryASHandleChangeD"
                      clearable
                    ></el-cascader>
                  </el-form-item>
                </el-col>
              </el-row>
  
              <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="備註" prop="remark">
                    <el-input  disabled    @input="$forceUpdate()" v-model="form.remark" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div style="text-align: center">
              <!-- <el-button type="primary" @click="submitForm('10')"
                  >保 存</el-button
                > -->
              <el-button @click="cancel">返 回</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </template>
        
        <script>
  import { getSubjectMap, updateSubjectMap } from "@/api/biz/subjectMap";
  import bankTable from "@/components/biz/bankTable";
  import {
    getAccountSubjectTree,
    getEntry,
    addEntry,
    updateEntry,
  } from "@/api/biz/entry";
  
  export default {
    name: "SubjectMapAdd",
    components: { bankTable },
    dicts: [
      "subject_map_type",
      "bus_subject_type",
      "cost_scope",
  
      "customer_tag",
      "customer_source",
      "industry_type",
      "cart_type",
      "sys_user_sex",
      "customer_level",
      "bank_type",
    ],
    created() {
      if (this.$route.query.id) {
        console.log(this.$route.query);
        this.getAccountSubjectTree(this.$route.query.id);
      }
    },
    activated() {
      if (this.$route.query.id) {
        console.log(this.$route.query);
        this.getAccountSubjectTree(this.$route.query.id);
      }
    },
    data() {
      return {
        // 表单參數
        form: {
          jAccountSubjectType: null,
          jAccountSubjectOne: null,
          jAccountSubjectTwo: null,
          dAccountSubjectType: null,
          dAccountSubjectOne: null,
          dAccountSubjectTwo: null,
        },
        // 表单校验
        rules: {},
        accountSubjectArrJ: [],
        accountSubjectArrD: [],
        accountSubjectArr: [],
      };
    },
    methods: {
      get_detail(id) {
          getSubjectMap(id).then((response) => {
          console.log(response.data);
          this.form.id =  response.data.id
          this.form.mapType =  response.data.mapType
          this.form.busSubjectType =  response.data.busSubjectType
          this.form.busSubject =  response.data.busSubject
          this.form.busSubjectName =  response.data.busSubjectName
          this.form.jAccountSubjectType =  response.data.jAccountSubjectType
          this.form.jAccountSubjectOne =  response.data.jAccountSubjectOne
          this.form.jAccountSubjectTwo =  response.data.jAccountSubjectTwo
          this.form.dAccountSubjectType =  response.data.dAccountSubjectType
          this.form.dAccountSubjectOne =  response.data.dAccountSubjectOne
          this.form.dAccountSubjectTwo =  response.data.dAccountSubjectTwo
  
          this.form.remark =  response.data.remark?response.data.remark:''
        // this.form.BankName = item.bankName;
          this.accountSubjectArrJ = [];
          this.accountSubjectArrD = [];
          if (this.form.jAccountSubjectType != null&&this.form.jAccountSubjectType != '') {
          this.accountSubjectArrJ.push(this.form.jAccountSubjectType);
        }
        if (this.form.jAccountSubjectOne != null&&this.form.jAccountSubjectOne != '') {
          this.accountSubjectArrJ.push(this.form.jAccountSubjectOne);
        }
        if (this.form.jAccountSubjectTwo != null&&this.form.jAccountSubjectTwo != '') {
          this.accountSubjectArrJ.push(this.form.jAccountSubjectTwo);
        }

        if (this.form.dAccountSubjectType != null&&this.form.dAccountSubjectType != '') {
          this.accountSubjectArrD.push(this.form.dAccountSubjectType);
        }
        if (this.form.dAccountSubjectOne != null&&this.form.dAccountSubjectOne != '') {
          this.accountSubjectArrD.push(this.form.dAccountSubjectOne);
        }
        if (this.form.dAccountSubjectTwo != null&&this.form.dAccountSubjectTwo != '') {
          this.accountSubjectArrD.push(this.form.dAccountSubjectTwo);
        }
          console.log( this.form);
          console.log( this.accountSubjectArrD);
          console.log( this.accountSubjectArrJ);
          this.$forceUpdate()
        });
      },
      queryASHandleChangeJ(subject) {
        console.log(subject);
        this.form.jAccountSubjectType = subject[0];
        this.form.jAccountSubjectOne = subject[1];
        this.form.jAccountSubjectTwo = subject[2];
      },
      queryASHandleChangeD(subject) {
        console.log(subject);
        this.form.dAccountSubjectType = subject[0];
        this.form.dAccountSubjectOne = subject[1];
        this.form.dAccountSubjectTwo = subject[2];
      },
      getAccountSubjectTree(id) {
        getAccountSubjectTree().then((response) => {
          this.accountSubjectArr = response.data;
          this.get_detail(id);
        });
      },
      /** 提交按钮 */
      submitForm(type) {
        console.log(this.accountSubjectArr);
        console.log(this.form);
        this.$refs["form"].validate((valid) => {
          if (valid) {
            updateSubjectMap(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.$tab.closePage().then(() => {
                // 执行結束的逻辑
                const obj = { path: "/entry/subjectMap", name: "SubjectMap" };
                this.$tab.refreshPage(obj);
              });
            });
          }
        });
      },
      cancel() {
        this.$tab.closePage().then(() => {
          // 执行結束的逻辑
          const obj = { path: "/entry/subjectMap", name: "SubjectMap" };
          this.$tab.refreshPage(obj);
        });
      },
    },
  };
  </script>
      
      <style  >
  .signType thead .el-table-column--selection .cell {
    display: none;
  }
  .dialog-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  </style>
        